<script setup lang="ts">
import { Form } from 'vee-validate'
import { onMounted } from 'vue'
import type { ObjectSchema } from 'yup'

interface Props {
  schema: ObjectSchema<any>
}

defineOptions({
  name: 'BaseForm',
})

defineProps<Props>()

const emits = defineEmits(['submit', 'invalidSubmit'])

async function submit(values: any) {
  emits('submit', values)
}

function invalidSubmit(error: any) {
  emits('invalidSubmit', error)
}

onMounted(() => {
  document.querySelectorAll('form')?.forEach((form) => {
    form?.removeAttribute('novalidate')
  })
})
</script>

<template>
  <Form :validation-schema="schema" @submit="submit" @invalid-submit="invalidSubmit" v-bind="$attrs">
    <slot />
  </Form>
</template>

<style scoped lang="scss">

</style>
